<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				//自定义互换两个节点的函数
				function change(a,b){
					//获取父节点
					var aParent = a.parentNode;
					var bParent = b.parentNode;
					
					if (aParent&&bParent) {
						//克隆
						var a2 = a.cloneNode(true);
						a2.onclick = a.onclick;
						a2.index=a.index;
						
						bParent.replaceChild(a2,b);
						aParent.replaceChild(b,a);
					}
				}
				//获取所有li节点
				var liNode = document.getElementsByTagName("li");
				//为每个li添加onclick函数
				for (var i=0;i<liNode.length;i++) {
					liNode[i].index=i;
					liNode[i].onclick=function(){
						//找到当前节点对应的li节点
						var targetIndex=0;
						if (this.index<4) {
							targetIndex=4+this.index;
						} else{
							targetIndex=this.index-4;
						}
						//交换index属性
						var tempIndex=this.index;
						this.index=liNode[targetIndex].index;
						liNode[targetIndex].index=tempIndex;
						//交换
						change(this,liNode[targetIndex]);
					}
				}
			}
		</script>
	</head>
	<body>
		<p>你喜欢哪个城市</p>
		<ul id="city">
			<li id="bj" name="Beijing">北京</li>
			<li id="sh">上海</li>
			<li id="dj">东京</li>
			<li>首尔</li>
		</ul>
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
	</body>
</html>
